{extend name="index_layout"/}
{block name="main"}
<style>
    .card-item {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ccc; /* 添加边框 */
        height: 100px; /* 根据需要调整高度 */
    }

    .card-item h3, .card-item p {
        text-align: center;
    }

    .card-item h3 {
        font-size: 20px;
    }

    .card-item p {
        font-size: 18px;
        color: #00a0e9;
    }
</style>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-lg3 layui-col-md6">
                <div class="layui-card">
                    <div class="card-item">
                        <div class="">
                            <h3>总用户数</h3>
                            <p>{$users_count.total}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-lg3 layui-col-md6">
                <div class="layui-card">
                    <div class="card-item">
                        <div class="">
                            <h3>今日新增</h3>
                            <p>{$users_count.day}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-lg3 layui-col-md6">
                <div class="layui-card">
                    <div class="card-item">
                        <div class="">
                            <h3>本月新增</h3>
                            <p>{$users_count.month}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-lg3 layui-col-md6">
                <div class="layui-card">
                    <div class="card-item">
                        <div class="">
                            <h3>本年新增</h3>
                            <p>{$users_count.year}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="layui-row layui-col-space10">
            <div class="layui-col-lg6 layui-col-md12">
                <div class="layui-input-inline">
                    <h3>用户增长折线图</h3>
                </div>
                <div class="layui-input-inline" style="float: right">
                    <label class="layui-form-label">日期</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="user-range" placeholder="">
                    </div>
                </div>
                <div id="user-chart" style="width: 100%; height: 400px; margin-top: 30px;"></div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<!-- 引入 ECharts 文件 -->
<script src="__STATIC__/libs/echarts/echarts.min.js"></script>
<script type="text/javascript">
    layui.use(['element', 'laydate'], function () {
        var element = layui.element;
        var laydate = layui.laydate;

        // // 基于准备好的dom，初始化echarts实例
        // var orderChart = echarts.init(document.getElementById('order-chart'));
        // 基于准备好的dom，初始化echarts实例
        var userChart = echarts.init(document.getElementById('user-chart'));

        // 初始化图表
        updateChart('user', userChart);

        // 更新图表的函数
        function updateChart(type, chart, date) {
            currentData = type;
            fetchData(type, date).then(data => {
                var option = getOption(type, data);
                chart.setOption(option, true);
            });
        }

        // 使用 fetch 获取数据的函数
        function fetchData(type, date = '') {
            let url = '{:url("main/data")}?type=' + type + '&date=' + date;
            return fetch(url)
                .then(response => response.json())
                .then(data => {
                    return data;
                })
                .catch(error => {
                    return {total: [0, 0, 0, 0, 0, 0, 0]}; // 返回默认空数据
                });
        }

        // 初始化日期范围选择器
        laydate.render({
            elem: '#order-range',
            range: true,
            max: 0,
            done: function (value, date, endDate) {
                // checkDateRange(date, endDate)
                updateChart('order', orderChart, value);
            }
        });

        // 初始化日期范围选择器
        laydate.render({
            elem: '#user-range',
            range: true,
            max: 0,
            done: function (value, date, endDate) {
                updateChart('user', userChart, value);
            }
        });

        function checkDateRange(startDate, endDate) {
            if (endDate && startDate) {
                var start = new Date(startDate.year, startDate.month - 1, startDate.date); // 开始日期
                var end = new Date(endDate.year, endDate.month - 1, endDate.date); // 结束日期
                var diffDays = (end - start) / (1000 * 60 * 60 * 24); // 计算天数差

                if (diffDays > 7) {
                    // 提示用户并重置选择
                    notice.error('最多只能选择 7 天！')
                    this.reset(); // 重置日期选择器
                }
            }
        }

        // 获取图表配置的函数
        function getOption(type, data) {
            var xAxisData = data.xAxis;
            var series = [];
            var legend = [];
            var title = '';

            switch (type) {
                case 'user':
                    series = [
                        {name: '用户数量', type: 'line', data: data.data.total}
                    ];
                    legend = ['用户数量'];
                    break;
                default:
                    series = [
                        {name: '订单总数', type: 'line', data: data.data.total},
                        {name: '待支付', type: 'line', data: data.data.pending},
                        {name: '已支付', type: 'line', data: data.data.paid},
                        {name: '已取消', type: 'line', data: data.data.canceled}
                    ];
                    legend = ['订单总数', '待支付', '已支付', '已取消'];

            }
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    feature: {
                        magicType: {
                            type: ['line', 'bar'],
                            title: {
                                line: '折线图切换',
                                bar: '柱形图切换',
                            },
                        },
                        saveAsImage: {
                            show: true,
                            title: '保存为图片',
                            type: 'png',
                            lang: ['点击保存']
                        }
                    }
                },
                legend: {
                    data: legend,
                    height: 'auto'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };
        }


    });

</script>
{/block}
